<!DOCTYPE html>
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="utf-8" src="js/mjdevjs.js"></script>
<script type="text/javascript" src="js/l10n.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/superfish.min.js"></script>
<script type="text/javascript" src="js/poshytip.min.js"></script>
<script type="text/javascript" src="js/carousel.min.js"></script>
<script type="text/javascript" src="js/easing.min.js"></script>
<script type="text/javascript" src="js/fancybox.min.js"></script>
<script type="text/javascript" src="js/jquery.sidebar.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" media="all">

</head>

<body onload="mjdevjs.init();">

<div id="header">
  <div class="section">
      <div id="header-top">
        <div id="header-text" class="one-of-two"><p>mUbuntu</p></div>
        <div id="navigation" class="two-of-two">
          <!-- .menu -->
          <ul class="menu sf-js-enabled">
            <li class="first"><a class="page-text" href="javascript:void(0)" title="theme">theme</a></li>
            <li>
              <a href="javascript:void(0)" title="power of">power of</a>
              <ul style="display: none; visibility: hidden;">
                <li class="cat-item cat-item-4"><a class="page-text" href="javascript:void(0)" title="hibernate">hibernate</a></li>
                <li class="cat-item cat-item-3"><a class="page-text" href="javascript:void(0)" title="shut down">shut down</a></li>
              </ul>
            </li>
            <li>
            	<a href="javascript:void(0)" title="about">about</a>
            	<ul style="display: none; visibility: hidden;">
            		<li><a class="page-text twitter" href="http://twitter.com/mimoccc" target="_top" title="follow me on twitter">twitter</a></li>
            		<li><a class="page-text facebook" href="http://www.facebook.com/milan.jurkulak/" target="_top" title="follow me on facebook">facebook</a></li>
            	</ul>
            </li>
          </ul>
          <!-- .menu -->
        </div>
      </div>
      <div style="section">
        <div id="logo" class="full-width">
          <img src="desktop/logo-ubuntu.png" alt="logo of session" height="200">
        </div>
      </div>
  </div>
</div>

<!--div id="stickynote">
	<h1>I'm a CSS3 sticky note!</h1>
	<p>This sticky note was created using only CSS3 &mdash; no images what-so-ever! Want to know why and how I did it? <a href="http://galengidman.com/2010/12/13/css3-sticky-note/">Read this</a>.</p>
	<p>If this looks funny to you, then you are probably using an older, unsupported browser. Try <a href="http://google.com/chrome/">Google Chrome</a> instead.</p>
</div-->

<div id="footer" class="row"><div class="section">mjdev (C) 2011 ubuntu logon greeter theme (beta v 0.9a)</div></div>

<div class="message" id="message">
	<h3>message label</h3>
	<p>message text</p>
</div>

</body>

<script language="javascript">
mjdevjs.onAppStart.subscribeOnce(function() {
	if(!(window.App instanceof Object)) {

		window.App = {
			alert : function(text, label, type, time){
				$("#message").attr("class", (type||'success') + " message");
				$("#message h3").html((label||'alert'));
				$("#message p").html((text||''));
				
				//$("#message").css('display','block');
				
				//$("#message").click(function(){
					//$("#message").css('display','none');
				//});
				
				$("#message").fadeIn('slow', function() {
					$("#message").click(function(){
						$("#message").fadeOut('slow', function(){});
					});
				}).delay((time||2000)).fadeOut('slow', function(){});
			},
			selected_user : false,
			started : false,
			_body : mjdevjs._body,
			info : function(text) {
				App.alert(text, 'logon info', 'info');
			},
			problem : function(text) {
				App.alert(text, 'logon problem', 'error');
			},
			infoQuery : function(text) {},
			secretInfoQuery : function(text) {},
			selectedUserChanged : function(username) {},
			defaultLanguageNameChanged : function(language_name) {},
			defaultLayoutNameChanged : function(layout_name) {},
			defaultSessionNameChanged : function(session_name) {},
			selectUser : function(username) {},
			timedLoginRequested : function(username, delay) {},
			ready : function() {
				if (this.started) return;
				else this.started = true;
				// load and initialise Header component
				//mjdevjs.loadComponent('header',function() {
					//App.header = new Header({id:'login_header', renderTo:App._body});
					//App.header.create();
					//App.header.show();
				//}, App);
				// load and initialise Footer component
				//mjdevjs.loadComponent('footer',function() {
					//App.footer = new Footer({id:'login_footer', renderTo:App._body});
					//App.footer.create();
					//App.footer.show();
				//}, App);
				
				// load and initialise Clock component
				mjdevjs.loadComponent('clock',function() {
					App.clock = new Clock({id:'login_clock', append:App._body});
					App.clock.create();
					App.clock.show();
				}, App);
				
				// load and initialise Login component
				mjdevjs.loadComponent('login1',function() {
					App.login = new Login({id:'login', append:App._body});
					App.login.create();
					App.login.show();

					$ = jQuery;

					$(document).ready(function($) { 
					
						$(document).keypress(function(e) {
							var code = (e.keyCode ? e.keyCode : e.which);
							if(code == 13) { //enter
								if(App.selected_user) {
									logon.users[App.selected_user.attr("idx")].password = 
										$('#password'+(parseInt(App.selected_user.attr("idx"))+2)).val();
									document.title='login:'+logon.users[App.selected_user.attr("idx")].toString();
								}
							}
							if(code == 37) //right
								if(App.selected_user==false) $('#carousel').prev();
							if(code == 39) //left
								if(App.selected_user==false) $('#carousel').next();
							if(code == 27) //escape
								$.fancybox.close();
						});
					
						//$.easing['BounceEaseOut'] = function(p, t, b, c, d) {
						//	if ((t/=d) < (1/2.75)) {
						//		return c*(7.5625*t*t) + b;
						//	} else if (t < (2/2.75)) {
						//		return c*(7.5625*(t-=(1.5/29.75))*t + .75) + b;
						//	} else if (t < (2.5/2.75)) {
						//		return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
						//	} else {
						//		return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
						//	}
						//};

						$('#carousel').jcarousel({
							wrap: 'both',
							scroll: 1,
							start: 1,
							auto: 0,
							animation: 'slow',
							//easing: 'BounceEaseOut',
							buttonNextHTML: '<div class="arrow forward hover"></div>',
							buttonPrevHTML: '<div class="arrow back hover"></div>'
						});

						$("a.shots").fancybox({
							transitionIn	: 'elastic',
							transitionOut	: 'elastic',
							titlePosition	: 'over',
							overlayColor	: '#202020',
							overlayOpacity	: 1,
							padding		: '10',
							titleFormat	:
								function(title, currentArray, currentIndex, currentOpts) {
										return 
										'<span id="fancybox-title-over">Image ' + 
										(currentIndex + 1) + ' / ' + 
										currentArray.length + 
										(title.length ? ' &nbsp; ' + title : '') 
										+ '</span>';
								}
						});

						$("a.user").fancybox({
							width		: 'auto',
							height		: 'auto',
							transitionIn	: 'elastic',
							transitionOut	: 'elastic',
							autoDimensions	: false,
							overlayColor	: '#202020',
							overlayOpacity	: 1,
							padding		: '0',
							titleShow	: false,
							onStart		: function(selectedArray, selectedIndex, selectedOpts){
								var objid = selectedArray[selectedIndex].toString();
								objid = objid.substr(objid.indexOf('#'));
								var obj = $(objid);
								App.fancybox = selectedOpts;
								App.selected_user = obj;
							},
							onClosed	:function(){
								App.selected_user = false;
								document.title = '';
							},
							onComplete	: function(){
								if(App.selected_user)
									$('#password'+(parseInt(App.selected_user.attr("idx"))+2)).focus();
							}
						});

						$('.excerpt-text').poshytip({
							className: 'tooltip',
							showTimeout: 1,
							hideTimeout: 1000,
							alignTo: 'target',
							alignX: 'center',
							offsetY: 5,
							allowTipHover: true,
							content: '[title]'
						});

						$('.page-text').poshytip({
							className: 'tooltip',
							showTimeout: 1,
							hideTimeout: 1000,
							alignTo: 'target',
							alignX: 'inner-right',
							offsetY: 9,
							offsetX: 0,
							allowTipHover: true,
							content: '[title]'
						});

						$('ul.menu').superfish();

						mjdevjs.onAppReady.fire();
						App.alert('Please select user photo and put password to log in to system...','logon','info');
					});
				}, App);
			},
			reset : function() {},
			userAuthorized : function() { document.title = 'startsession'; }
		};
		//test
		App.ready();
	}
}, this, 'app');
</script>
</html>
